import React from 'react'
import {Row, Col, Card, List} from 'antd'
import {LeftOutlined} from '@ant-design/icons';
import '../styles.css'


class VisitingRecords extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: "新增公司",
            visitingInfo: {
                //审核部门
                companyName: "",//访问公司
                factoryName: "",//访问厂区id
                visitingDepartment: "",//访问部门
                auditor: "",//审核人员
                //申请信息
                company: "",//公司名称
                applicationDepartment: "",//部门名称
                name: "",//访客姓名
                phoneNum: "",//手机号码
                carNum: "",//车辆信息
                reason: "",//到访事由
                goods: "",//携带物品
                front: "",//证件照片正面
                back: "",//证件照片反面
                //审核信息
                auditStatus: "",//审核状态
                dismissReason: "",//驳回原因
                //到访信息
                visitState: "",//到访状态
                applicationTime: "",//申请时间
                reviewTime: "",//审核时间
                visitingTime: "",//到访时间
                leaveTime: ""//出厂时间
            }
        };
    }

    componentDidMount() {
        console.log("初始化");
        this.getVisitingInfo();
    }

    getVisitingInfo() {
        console.info("获取访客信息");
        this.setState({
            visitingInfo: {
                companyName: "儒商网络",
                factoryName: "厂区一",
                visitingDepartment: "技术部",
                auditor: "张三",
                company: "公司1",
                applicationDepartment: "技术部",
                name: "张三",
                phoneNum: "132323232323",
                carNum: "HMQ123",
                reason: "技术交流",
                goods: "笔记本电脑一台",
                front: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594899235016&di=a84835662ad0304f49f27471dbfe0159&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171103%2Fac2da7fba0d447ff8565b81694b4da5d.jpeg",
                back: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594899329457&di=a3eb944c46918fecbd2d199b97906b12&imgtype=0&src=http%3A%2F%2Fi.ce.cn%2Fce%2Fxwzx%2Fgnsz%2Fgdxw%2F201612%2F29%2FW020161229553836070126.jpg",
                auditStatus: "已驳回",//审核状态
                dismissReason: "虚假身份证信息",//驳回原因
                visitState: "审核通过,未到访",//到访状态
                applicationTime: "2020-03-20 04:00:00",//申请时间
                reviewTime: "2020-03-20 05:00:00",//审核时间
                visitingTime: "2020-03-20 07:00:00",//到访时间
                leaveTime: "2020-03-20 20:00:00"//出厂时间
            }
        })
    }

    returnMain = e => {
        this.props.returnMain()
    }

    render() {
        return (
            <div className="girdBg">
                <Row className="searchBox">
                    <Col>
                        <div className="returnBtn" onClick={this.returnMain}>
                            <LeftOutlined/>返回
                        </div>
                    </Col>
                </Row>
                <Row className="searchBox">
                    <Col span={24}>
                        <Card title="审核部门" bordered={false}>
                            <p>
                                <span>访问公司:</span>
                                <span>{this.state.visitingInfo.companyName}</span>
                            </p>
                            <p>
                                <span>访问厂区:</span>
                                <span>{this.state.visitingInfo.factoryName}</span>
                            </p>
                            <p>
                                <span>访问部门:</span>
                                <span>{this.state.visitingInfo.visitingDepartment}</span>
                            </p>
                            <p>
                                <span>审核人员:</span>
                                <span>{this.state.visitingInfo.auditor}</span>
                            </p>
                        </Card>
                        <Card title="申请信息" bordered={false}>
                            <p>
                                <span>公司名称:</span>
                                <span>{this.state.visitingInfo.company}</span>
                            </p>
                            <p>
                                <span>部门名称:</span>
                                <span>{this.state.visitingInfo.applicationDepartment}</span>
                            </p>
                            <p>
                                <span>访客姓名:</span>
                                <span>{this.state.visitingInfo.name}</span>
                            </p>
                            <p>
                                <span>手机号码:</span>
                                <span>{this.state.visitingInfo.phoneNum}</span>
                            </p>
                            <p>
                                <span>车辆信息:</span>
                                <span>{this.state.visitingInfo.carNum}</span>
                            </p>
                            <p>
                                <span>到访事由:</span>
                                <span>{this.state.visitingInfo.reason}</span>
                            </p>
                            <p>
                                <span>携带物品:</span>
                                <span>{this.state.visitingInfo.goods}</span>
                            </p>
                            <p>
                                <span>证件照片:</span>
                            </p>
                            <div>
                                <img className="cardImg"
                                     style={{marginRight: 30}}
                                     alt="logo"
                                    // src={"https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"}
                                     src={this.state.visitingInfo.front}
                                />
                                <img className="cardImg"
                                     alt="logo"
                                    // src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                                     src={this.state.visitingInfo.back}
                                />
                            </div>
                        </Card>
                        <Card title="审核信息" bordered={false}>
                            <p>
                                <span>审核状态:</span>
                                <span>{this.state.visitingInfo.auditStatus}</span>
                            </p>
                            <p>
                                <span>驳回原因:</span>
                                <span>{this.state.visitingInfo.dismissReason}</span>
                            </p>
                        </Card>
                        <Card title="到访信息" bordered={false}>
                            <p>
                                <span>到访状态:</span>
                                <span>{this.state.visitingInfo.visitState}</span>
                            </p>
                            <p>
                                <span>申请时间:</span>
                                <span>{this.state.visitingInfo.applicationTime}</span>
                            </p>
                            <p>
                                <span>审核时间:</span>
                                <span>{this.state.visitingInfo.reviewTime}</span>
                            </p>
                            <p>
                                <span>到访时间:</span>
                                <span>{this.state.visitingInfo.visitingTime}</span>
                            </p>
                            <p>
                                <span>出厂时间:</span>
                                <span>{this.state.visitingInfo.leaveTime}</span>
                            </p>
                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default VisitingRecords